<template>
  <el-upload
    ref="uploadRef"
    action="#"
    :multiple="multiple"
    :limit="limit"
    :file-list="fileList"
    :on-change="handleChange"
    :on-exceed="handleExceed"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload"
    :accept="accept"
    :disabled="disabled"
    :auto-upload="false"
    v-bind="$attrs"
  >
    <slot name="trigger">
      <el-button type="primary">点击上传</el-button>
    </slot>
  </el-upload>
</template>

<script>
import { defineComponent, ref, watch, nextTick } from 'vue'
import { ElUpload, ElButton, ElMessage } from 'element-plus'

export default defineComponent({
  name: 'MyUpload',
  components: {
    ElUpload,
    ElButton
  },
  props: {
    action: {
      type: String,
      required: true
    },
    multiple: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 1
    },
    accept: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    modelValue: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue', 'exceed', 'success', 'error', 'remove'],
  setup(props, { emit }) {
    const uploadRef = ref(null)
    const fileList = ref([])

    // 同步 modelValue
    watch(
      () => props.modelValue,
      (newVal) => {
        nextTick(() => {
          fileList.value = newVal.map((file) => {
            console.log(file)
            return {
              name: file.name === undefined ? file.attachment_name : file.name,
              url: file.url === undefined ? file.attachment_path : file.url,
              uid: file.uuid !== undefined ? file.uuid : file.uid
            }
          })
          console.log(fileList.value)
        })
      },
      { immediate: true }
    )

    // 文件改变时的处理
    const handleChange = (file, fileList) => {
      emit('update:modelValue', fileList)
    }

    // 文件超过限制时的处理
    const handleExceed = (files, fileList) => {
      ElMessage.error('附件只能上传10个文件！')
      emit('exceed', files, fileList)
    }

    // 文件删除时的处理
    const handleRemove = (file, fileList) => {
      console.log(file)
      if (file.url !== undefined) {
        const fileUid = file.uid
        emit('remove', fileUid)
      }

      // emit('update:modelValue', fileList)
    }

    // 上传成功时的处理
    const handleSuccess = (response, file, fileList) => {
      emit('success', response, file, fileList)
    }

    // 上传失败时的处理
    const handleError = (err, file, fileList) => {
      emit('error', err, file, fileList)
    }

    // 上传前的校验
    const beforeUpload = (file) => {
      if (props.accept && !props.accept.includes(file.type)) {
        alert(`文件类型不匹配，仅支持 ${props.accept} 格式`)
        return false
      }
      return true
    }

    return {
      uploadRef,
      fileList,
      handleChange,
      handleExceed,
      handleRemove,
      handleSuccess,
      handleError,
      beforeUpload
    }
  }
})
</script>
